<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { loginApi } from '@/api/login'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const loginForm = reactive({
  username: '',
  password: ''
})

const handleLogin = async () => {
  loading.value = true
  try {
    const result = await loginApi(loginForm)
    if (result.code === 1) {
      localStorage.setItem('token', result.data.token)
      ElMessage.success('登录成功')
      router.push('/home')
    } else {
      ElMessage.error(result.msg || '登录失败')
    }
  } catch (error) {
    ElMessage.error('登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div style="height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f2f5;">
    <div style="width: 400px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);">
      <h1 style="text-align: center; margin-bottom: 20px;">登录</h1>
      
      <div style="margin-bottom: 15px;">
        <label>用户名</label>
        <input v-model="loginForm.username" style="width: 100%; padding: 8px; margin-top: 5px;">
      </div>
      
      <div style="margin-bottom: 15px;">
        <label>密码</label>
        <input v-model="loginForm.password" type="password" style="width: 100%; padding: 8px; margin-top: 5px;">
      </div>
      
      <button @click="handleLogin" :disabled="loading" style="width: 100%; padding: 10px; background: #1890ff; color: white; border: none; border-radius: 4px;">
        {{ loading ? '登录中...' : '登录' }}
      </button>
    </div>
  </div>
</template>